import React, { PureComponent } from 'react'
import { StyleSheet, View, Text, FlatList, TouchableOpacity } from 'react-native'
import { SafeAreaView } from 'react-navigation'
import { connect } from 'react-redux'
import CoverageCell from '../tools/CoverageCell'


@connect(({ connectedDevice }) => ({
  devices: connectedDevice.list
}))
export default class Device extends React.PureComponent {
  static navigationOptions = {
    title: '常见问题'
  }
  constructor(props) {
    super(props)
    const {navigation} = props
    this.state = {
      selectedId: null,
      resultJson:null,
      testwt:null,
      resultJ:null
    }
  }
  detail(title){
    this.setState({
      selectedId:title
    })
    alert(title);
  }
  // getChildrenMsg = () => {
  //   this.setState({
  //       childrenMsg: this.refs.children.state.msg
  //   })
  // }
  renderItem = ({ item }) => {
    // const backgroundColor = item.id === selectedId ? "#6e3b6e" : "#f9c2ff";
    const {navigation} = this.props;
    return (
      // <TouchableOpacity onPress={()=>navigation.push('Device')}>
      //   <View>
      //     <Text style={styles.title}>{item.title}</Text>         
      //   </View>
      // </TouchableOpacity>
      <CoverageCell title={item.title}
      cars={item.persons}
      detail={this.detail.bind(this)}
      selectedId={this.state.selectedId}
      />
    );
  };
  // getData =
  componentDidMount(){
    fetch('https://apis.qingchuan.xyz/weather.php')
    .then(response => response.json())
    .then( wdata => {
        this.setState({resultJson : wdata })
      }
    ).catch(
      err => {
        // console.error(err)
        alert(err);
        // this.setState({resultJ : err })
      });
    // .then(data => {
    //   this.setState({resultJson:data});
    //   // this.setState({testwt:data});
    //   // console.log(data);
    //   // return data;        
    // })
    
  }
  render() { 
    // const [selectedId, setSelectedId] = useState(0);
    const DATA = [
      {
        id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
        title: "First Item",
        persons:[
          {name:'爸爸',phoneNumber:'13500000001',id:'1'},
          {name:'妈妈',phoneNumber:'13500000002',id:'2'},
          {name:'姐姐',phoneNumber:'13500000003',id:'3'},
          {name:'姐姐',phoneNumber:'13500000004',id:'3'}]
      },
      {
        id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
        title: "Second Item",
        persons:[
          {name:'张敏',phoneNumber:'18700000001',id:'4'},
          {name:'刘聪',phoneNumber:'18700000002',id:'5'},
          {name:'张澜',phoneNumber:'18700000003',id:'6'}]
      },
      {
        id: "58694a0f-3da1-471f-bd96-145571e29d72",
        title: "Third Item",
        persons:[
          {name:'李斯',phoneNumber:'15800000007',id:'7'},
          {name:'张娃',phoneNumber:'15800000008',id:'8'},
          {name:'纳斯',phoneNumber:'15800000009',id:'9'}]
      },
    ];
  //   fetch('https://apis.qingchuan.xyz/weather.php',{
  //     method: 'GET',
  //     headers: {
  //         Accept: 'application/json',
  //         'Content-Type': 'application/json'
  //     }
  // })
  // .then(response => response.json())
  // .then(data => {
  //   this.setState({resultJson:data});
  //   // this.setState({testwt:data});
  //   console.log(data);
  //   return data;        
  // })
  // .catch(err => console.error(err));
    // const getdata2 =  fetch('http://apis.juhe.cn/simpleWeather/query?city=%E8%8B%8F%E5%B7%9E&key=13df31514431e93ad76ac38a52e94932')
    // const getdata1 =this.getdata;
    // this.getData;
    // const tianqi = this.getData;
    // console.log(tianqi, '121212');
    // tianqi.result.future.map((key,value) => {
    //     console.log(key , '010101010' ,value)
    // })
    const tianqi1 = this.state.resultJson;
    // const testwt2 =  this.state.testwt;
    
    // if(testwt2 != null){
    //   console.log(testwt2.result,'testwt2111');
    // }
    if(tianqi1 != null){
      // console.log('222222222222',tianqi1);
      // let tianqi2 = Array.from(tianqi1);
      // // let tianqi2 = JSON.parse(tianqi1);
// tianqi1 =Array.from(tianqi1);
      // console.log('222222222223',tianqi2);
      var weather = [];
      JSON.parse(tianqi1).result.forecasts.map((value,key) => {
              // console.log(key , '010101010' ,value.date);
              weather.push({id : key, title : value.date ,persons:[{name : JSON.stringify(value),phoneNumber:key,id:key  }] })
      })
      const realtime = JSON.parse(tianqi1).result.now;
      weather.push({id : 65535, title :'实时天气', persons:[{name : JSON.stringify(realtime),phoneNumber:65535,id:65535  }] })
      // console.log(weather);
    }
    return (
      <SafeAreaView style={styles.container}>
        <FlatList
          ListEmptyComponent={() => <Text style={styles.placeholder}>暂无QA</Text>}
          data={weather}
          renderItem={this.renderItem}
          ItemSeparatorComponent={() => <View style={styles.border} />}
          keyExtractor={(item,index) => index.toString()}
          extraData={this.state.selectedId}
        />
        <View>
           {this.state.resultJson != null ?  <Text>{JSON.stringify(JSON.parse(this.state.resultJson).result.location)}</Text> : <Text>?</Text>}
        </View>
      </SafeAreaView>
    );
  };



}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    // marginTop: StatusBar.currentHeight || 0,
    marginTop:10
  },
  item: {
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
  border: {
    backgroundColor: '#d9d9d9',
    height: 0.5
  },
});